<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新冠病毒疫情跟踪器</title>
    <link rel="stylesheet" href="{{ url_for('static', path='/semantic.min.css') }}">
    <script src="{{ url_for('static', path='/semantic.min.js') }}"></script>
    <script src="{{ url_for('static', path='/jquery-3.5.1/jquery-3.5.1.min.js') }}"></script>

    <script>
        $(document).ready(function(){
            $('#left_btn').click(function(){
                const input_val = $('#city').val();
                window.location.href = 'http://' + window.location.host + '/coronavirus?city_name=' + input_val;
            });
            $('#right_btn').click(function(){
                $.get('{{ sycn_data_url }}', function(result){
                    alert('Message: '+ result.message)
                })
            })
        })
    </script>


</head>
<body>
    <div class="content">
        <h2></h2>
        <h1 style="text-align: center;">新冠病毒疫情跟踪器</h1>
        <h2></h2>

        <button style="color:black; border-radius: 10px; font-weight: 600; float: left;",
         id="left_btn", type="submit", class="ui button alert-secondary">
            过滤
        </button>
        <div class="ui input">
            <label for="city"></label>
            <input type="text", id="city", placeholder="城市查询">
        </div>
        <button style="color:black; border-radius: 10px;font-weight: 600; float: right;",
        id="right_btn", type="submit", class="ui button primary">
           同步数据
       </button>
       <table class="ui celled table">
           <thead>
               <tr>
                   <th>国家</th>
                   <th>城市</th>
                   <th>日期</th>
                   <th>累计确诊数</th>
                   <th>累计死亡数</th>
                   <th>累计痊愈数</th>
                   <th>更新时间</th>
               </tr>
           </thead>
           {% for d in data %}
                <tr>
                    <td>{{ d.city.country }}</td>
                    <td>{{ d.city.province }}</td>
                    <td>{{ d.data_date }}</td>
                    <td>{{ d.confirmed }}</td>
                    <td>{{ d.deathed }}</td>
                    <td>{{ d.recovered }}</td>
                    <td>{{ d.update_time }}</td>
                </tr>
           {% endfor %}
       </table>
    </div>
</body>
</html>